<template>
    <div class="box">
        <header class="header">
          <div class="header-button isleft">
            <label>
              <router-link tag="span" to="silkbag" class="iconfont icon-arrow-right-copy-copy"></router-link>
              <p class="zoom"><em class="iconfont icon-sousuo"></em><input class="search" type="text" placeholder="搜索更多育儿知识"></p>
            </label>
            <p></p>
          </div>
        </header>
        <div class="content">
          <div class="nav">
            <ul>
              <li>孕期</li>
              <li>0-1岁</li>
              <li>1-3岁</li>
              <li>3-6岁</li>
            </ul>
          </div>
          <div class="photo">
            <img src="./../../assets/bb7.jpg" alt="">
          </div>
          <div class="Menu">
            <router-link tag="p" to=""><b><span><img src="./../../assets/xiao0.jpg" alt=""></span><p>能不能吃</p></b></router-link>
            <router-link tag="p" to=""><b><span><img src="./../../assets/xiao1.jpg" alt=""></span><p>营养食谱</p></b></router-link>
            <router-link tag="p" to=""><b><span><img src="./../../assets/xiao3.jpg" alt=""></span><p>我的收藏</p></b></router-link>
            <router-link tag="p" to=""><b><span><img src="./../../assets/xiao2.jpg" alt=""></span><p>我的收藏</p></b></router-link>
          </div>
          <div class="con">
              <div class="left"><img src="../../assets/bb3.jpg" alt="" srcset="" ></div>
              <div class="right">
                <p>生长发育，8个月的孩子生长发育特点</p>
                <span>9999万人在读</span>
              </div>
            </div>
          </div>
          <div class="con">
              <div class="left"><img src="../../assets/bb3.jpg" alt="" srcset="" ></div>
              <div class="right">
                <p>生长发育，8个月的孩子生长发育特点</p>
                <span>9999万人在读</span>
              </div>
            </div>
          </div>
</template>

<script>
import Vue from 'vue'
// import Bklist from '@/components/KIT/Bklist'
// // import Up from '@/components/KIT/Up'
import { Header, Button } from 'mint-ui'
import axios from 'axios'
Vue.component(Header.name, Header, Button)
Vue.use(Button)
export default {
  data () {
    return {
      baikelist: []
    }
  },
  methods: {
    back () {
      this.$router.push('/silkbag')
    }
  }
}
</script>

<style lang="scss" scoped>
 @import '@/lib/reset.scss';
.header {
  @include rect(100%, 44px);
  @include background-color(#f9f9f9);
  padding-top:10px;
  // @include flex-direction(column);
     span {
      float: left;
      @include rect(30px, 40px);
    };
    .zoom {
      float:left;
      margin-left: 40px;
      display: block;
      @include border(1px, #aaa, solid, 10px);
      @include background-color(#bbb);
      @include rect(250px, 25px);
      @include flexbox();
       @include align-items(center);
      .search {
        border:0;
        @include rect(150px, 20px);
        display: block;
        @include margin(0 0 0 10%);
        @include border(0px, #aaa, solid);
        @include background-color(#bbb);
      }
      em {
        @include margin(0 0 0 10%)
      }
    }
}
.content {
  .nav {
       @include rect(100%, 26px);
        // @include background-color(#bbb);
     ul {
        @include flexbox();
        @include align-items();
        @include justify-content();
        li {
            @include rect(90px, 45px);
            @include text-align();
            display: block;
            line-height:45px;
            //  @include border(1px, #aaa, solid);
        }
     }
    }
}
.photo {
  @include rect(80%,120px);
   @include background-color(#bbb);
   @include margin(5% 0 0 10%);
   img {
     @include rect(100%, 100%);
   }
}
 .Menu {
  margin-top: 20px;
  height: 120px;
  width: 100%;
  // border: 1px solid #aaa;
  display: flex;
  justify-content:center;
  padding-left:center;
  align-items: flex-start;
 
  b {
    @include rect(80px, 80px);
    // @include border(1px, #ccc, solid);
    display: block;
     font-weight: 100;
    @include flexbox();
    @include flex-direction(column);
    @include justify-content(center);
    @include align-items();
    span {
      @include rect(40px,40px);
      @include border(1px, #ccc, solid, 30%);
      img {
        @include rect(100%, 100%)
      }
      }
    p {
      @include margin(10px 0 0 0)
    }
  }
 }
 .header span{
   margin-left:10px;
   margin-top: 5px
 }
 .con{
      width: 96%;
      height: 20%;
       background:#F0E7D1;
      margin-bottom: 4%;
      padding: 10% 2%;
      margin-left: 2%
    }
    .left{
      float:left;
      width: 40%;
      height: 100%;
      margin-right: 2%
    }
    .left img{
      width: 100%;
      height: 100%;
    }
    .right{
       width: 56%;
       height: 100%;
       margin-left: 2%;
       float: right
    }
    .right p{
      height: 80%;
    }
    .right span{
      color: #BCBBBB;
      font-size: 12px
    }
    .nav ul{
      margin-right: 42px;
    }
</style>
